{extend name="admin@index_layout"/}
{block name="main"}
<div class="layui-card">
    <div class="layui-card-header">添加栏目</div>
    <div class="layui-card-body">
        <form class="layui-form form-horizontal" action="{:url('cms/category/edit')}" method="post">
            <div class="layui-tab">
                <ul class="layui-tab-title">
                    <li class="layui-this">基本设置</li>
                    <li>选项设置</li>
                    <li id="modeTab">模板设置</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div class="layui-form-item">
                            <label>上级菜单</label>
                            <div class="w300">
                                <select name="parentid" lay-verify="required">
                                    <option value="0">作为顶级栏目</option>
                                    {$category|raw}
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label>栏目类型</label>
                            <div class="w300">
                                <input type="radio" name="type" value="2" title="列表" {eq name="data.type" value="2" }checked{/eq} lay-filter="type">
                                <input type="radio" name="type" value="1" title="单页" {eq name="data.type" value="1" }checked{/eq} lay-filter="type">
                                <input type="radio" name="type" value="3" title="链接" {eq name="data.type" value="3" }checked{/eq} lay-filter="type">
                            </div>
                        </div>
                        <div class="layui-form-item web_list">
                            <label>选择模型</label>
                            <div class="w300">
                                <select name="modelid">
                                    <option value="">请选择模型</option>
                                    {volist name="models" id="vo"}
                                    <option value="{$vo.id}" {eq name="vo.id" value="$data['modelid']" }selected{/eq}>{$vo.name} </option> {/volist} </select> </div> </div> <div class="layui-form-item">
                                        <label>栏目标题 </label>
                                        <div class="w300">
                                            <input type="text" name="catname" autocomplete="off" placeholder="栏目名称" class="layui-input" value="{$data.catname}">
                                        </div>
                            </div>
                            <div class="layui-form-item">
                                <label>唯一标识</label>
                                <div class="w300">
                                    <input type="text" name="catdir" autocomplete="off" placeholder="唯一标识" class="layui-input" value="{$data.catdir}">
                                </div>
                                <div class="layui-form-mid layui-word-aux">栏目唯一英文数字标识</div>
                            </div>
                            <div class="layui-form-item web_seo">
                                <label>栏目简介</label>
                                <div class="w300">
                                    <textarea name="description" placeholder="栏目简介" class="layui-textarea">{$data.description}</textarea>
                                </div>
                            </div>
                            <div class="layui-form-item web_link">
                                <label>链接地址</label>
                                <div class="w300">
                                    <input type="text" name="url" autocomplete="off" placeholder="自定义链接地址" class="layui-input" value="{$data.url}">
                                </div>
                                <div class="layui-form-mid layui-word-aux">内部链接格式:模块/控制器/操作，外部链接则必须http://开头</div>
                            </div>
                            <div class="layui-form-item layui-form-text">
                                <label>栏目图片</label>
                                <div class="layui-form-field-label">
                                    <div class="js-upload-image">
                                        <div id="file_list_image" class="uploader-list">
                                            {notempty name="$data.image"}
                                            <div class="file-item thumbnail">
                                                <img data-original="{$data.image|default='__STATIC__/admin/img/none.png'}" src="{$data.image|default='__STATIC__/admin/img/none.png'}" width="100" style="max-height: 100px;">
                                                <i class="iconfont icon-delete_fill remove-picture" data-id="{$data.image}"></i>
                                            </div>
                                            {/notempty}
                                        </div>
                                        <input type="hidden" name="image" data-multiple="false" data-watermark='' data-thumb='' data-size="0" data-ext="gif,jpg,jpeg,bmp,png" id="image" value="{$data.image|default=''}">
                                        <div class="layui-clear"></div>
                                        <div id="picker_image">上传单张图片</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-tab-item">
                            <div class="layui-form-item">
                                <label>在导航显示</label>
                                <div class="w300">
                                    <input type="radio" name="status" value="1" title="显示" {eq name="data.status" value="1" }checked{/eq}> <input type="radio" name="status" value="0" title="隐藏" {eq name="data.status" value="0" }checked{/eq}> </div> </div> <div class="layui-form-item">
                                    <label>显示排序</label>
                                    <div class="w300">
                                        <input type="text" name="listorder" autocomplete="off" placeholder="显示排序" class="layui-input" value="{$data['listorder']}">
                                    </div>
                                </div>
                                <div class="layui-form-item web_seo">
                                    <label>网页标题</label>
                                    <div class="w300">
                                        <input type="text" name="setting[meta_title]" autocomplete="off" placeholder="针对搜索引擎设置的标题" class="layui-input" value="{$data['setting']['meta_title']}">
                                    </div>
                                </div>
                                <div class="layui-form-item web_seo">
                                    <label>网页关键词</label>
                                    <div class="w300">
                                        <input type="text" name="setting[meta_keywords]" autocomplete="off" placeholder="关键字中间用半角逗号隔开" class="layui-input" value="{$data['setting']['meta_keywords']}">
                                    </div>
                                </div>
                                <div class="layui-form-item web_seo">
                                    <label>网页描述</label>
                                    <div class="w300">
                                        <textarea name="setting[meta_description]" required="" lay-verify="required" placeholder="针对搜索引擎设置的网页描述" class="layui-textarea">{$data['setting']['meta_description']}</textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-tab-item">
                                <div class="layui-form-item web_list">
                                    <label class="w100">栏目首页模板</label>
                                    <div class="w300">
                                        <select name="setting[category_template]">
                                            <option value="category.{:config('template.view_suffix')}" selected>默认栏目首页:category.{:config('template.view_suffix')}</option>
                                            {volist name="tp_category" id="vo"}
                                            <option value="{$vo}" {eq name="data['setting']['category_template']" value="$vo" }selected{/eq}>{$vo} </option> {/volist} </select> </div> <div class="layui-form-mid layui-word-aux">新增模板以category_xx.{:config('template.view_suffix')}形式,【含有子栏目时生效】</div>
                                </div>
                                <div class="layui-form-item web_list">
                                    <label class="w100">栏目列表页模板</label>
                                    <div class="w300">
                                        <select name="setting[list_template]">
                                            <option value="list.{:config('template.view_suffix')}" selected>默认栏目列表页:list.{:config('template.view_suffix')}</option>
                                            {volist name="tp_list" id="vo"}
                                            <option value="{$vo}" {eq name="data['setting']['list_template']" value="$vo" }selected{/eq}>{$vo} </option> {/volist} </select> </div> <div class="layui-form-mid layui-word-aux">新增模板以list_xx.{:config('template.view_suffix')}形式,【没有子栏目时生效】</div>
                                </div>
                                <div class="layui-form-item web_list">
                                    <label class="w100">内容页模板</label>
                                    <div class="w300">
                                        <select name="setting[show_template]">
                                            <option value="show.{:config('template.view_suffix')}" selected>默认内容页:show.{:config('template.view_suffix')}</option>
                                            {volist name="tp_show" id="vo"}
                                            <option value="{$vo}" {eq name="data['setting']['show_template']" value="$vo" }selected{/eq}>{$vo} </option> {/volist} </select> </div> <div class="layui-form-mid layui-word-aux">新增模板以show_xx.{:config('template.view_suffix')}形式</div>
                                </div>
                                <div class="layui-form-item web_page">
                                    <label class="w100">单页模板</label>
                                    <div class="w300">
                                        <select name="setting[page_template]">
                                            <option value="page.{:config('template.view_suffix')}" selected>默认内容页:page.{:config('template.view_suffix')}</option>
                                            {volist name="tp_page" id="vo"}
                                            <option value="{$vo}" {eq name="data['setting']['page_template']" value="$vo" }selected{/eq}>{$vo} </option> {/volist} </select> </div> <div class="layui-form-mid layui-word-aux">新增模板以page_xx.{:config('template.view_suffix')}形式</div>
                                </div>
                            </div>
                        </div>
                        <input name="id" type="hidden" value="{$data.id}">
                        <div class="layui-form-item">
                            <div>
                                <button class="layui-btn ajax-post" lay-submit lay-filter="*" target-form="form-horizontal">立即提交</button>
                                <button class="layui-btn layui-btn-normal" onclick="javascript :history.back(-1);">返回</button>
                            </div>
                        </div>
                    </div>
        </form>
    </div>
</div>
{/block}
{block name="script"}
<script type="text/javascript" src="__STATIC__/admin/js/common.js"></script>
<script type="text/javascript">
layui.use(['layer', 'form'], function() {
    var layer = layui.layer,
        form = layui.form;
    setFieldOption($('input:radio[name="type"]:checked').val());
    form.on('radio(type)', function(data) {
        setFieldOption(data.value);
        //console.log(data.elem); //得到radio原始DOM对象
        //console.log(data.value); //被点击的radio的value值
    });
    $('.uploader-list').each(function() {
        $(this).viewer();
    });

    function setFieldOption(typeid) {
        //单页
        if (1 == typeid) {
            $('.web_list').hide();
            $('.web_link').hide();
            $('.web_page').show();
            $('#modeTab').show();
            $('.web_seo').show();
        }
        //列表
        if (2 == typeid) {
            $('.web_link').hide();
            $('.web_page').hide();
            $('.web_list').show();
            $('#modeTab').show();
            $('.web_seo').show();
        }
        //链接
        if (3 == typeid) {
            $('.web_page').hide();
            $('.web_list').hide();
            $('.web_link').show();
            $('#modeTab').hide();
            $('.web_seo').hide();
        }
    }

});
</script>
<script type="text/javascript" src="__STATIC__/libs/webuploader/webuploader.min.js"></script>
<script type="text/javascript" src="__STATIC__/libs/viewer/viewer.min.js"></script>
<script type="text/javascript" src="__STATIC__/libs/Sortable.js"></script>
<script type="text/javascript" src="__STATIC__/admin/js/form.js"></script>
<link rel="stylesheet" href="__STATIC__/libs/viewer/viewer.min.css">
<link rel="stylesheet" href="__STATIC__/libs/webuploader/webuploader.css">
{/block}